<template>
  <view>
    <u-navbar title="关注" title-size="36" :title-bold="true"></u-navbar>
    <view class="course-scroll">
      <edu-mescroll-body
        bottom="0"
        :bottombar="false"
        @init="mescrollInit"
        @down="refreshTop"
        @up="getFollow"
      >
        <view class="content">
          <view class="fans_item" v-for="(item, index) in courseList" :key="index">
            <view class="coverImg" @click="bindLint(item.user_id)">
              <course-image
                width="114"
                height="114"
                :borderRadius="57"
                :image="item.avatar_url"
              ></course-image>
            </view>
            <view class="fans_right">
              <view class="fans_l">
                <view class="fans_name u-line-1">{{ item.nick_name }}</view>
                <view class="fans_intro u-line-1">简介：{{ item.signature }}</view>
              </view>
              <view v-if="user_id == userInfo.id">
                <view
                  class="fans_r"
                  v-if="item.has_follow_me == 0"
                  @click="del_follow(item.user_id)"
                >
                  <label>已关注</label>
                </view>
                <view class="fans_re" v-else @click="del_follow(item.user_id)">
                  <label>互相关注</label>
                </view>
              </view>
            </view>
          </view>
        </view>
      </edu-mescroll-body>
    </view>
  </view>
</template>

<script>
import courseImage from '@/components/common/courseImage.vue'
import { mapGetters } from 'vuex'
export default {
  components: {
    courseImage,
  },
  data() {
    return {
      user_id: '',
      courseList: [],
      isDataEmpty: false,
      page: 1, //请求第几页
      pageSize: 10, //每页请求的数量
      total: 0, //总共的数据条数
      loadStatus: 'loadmore',
      isLoadMore: false,
    }
  },
  computed: {
    ...mapGetters({
      userInfo: 'user/getUserInfo',
    }),
  },
  onLoad(option) {
    this.user_id = option.id
  },
  methods: {
    getFollow(page) {
      this.$edu.api
        .getUserFollowList({
          user_id: this.user_id,
          page: page.num,
          count: page.size,
        })
        .then((res) => {
          const { data } = res
          this.courseList = data.data
          if (page.num == 1) this.courseList = []
          this.courseList = this.courseList.concat(data.data)
          this.mescroll.endBySize(data.data.length, data.data.total)
        })
    },
    // 下拉刷新
    refreshTop() {
      this.mescroll.resetUpScroll()
    },
    //关注
    follow(id) {
      this.$edu.api
        .getUserFollow({
          user_id: id,
        })
        .then((res) => {
          this.courseList.forEach((el, index) => {
            if (id == el.user_id) {
              el.has_follow_me = 1
            }
          })
        })
    },
    // 取关
    del_follow(id) {
      this.$edu.api
        .getUserDelFollow({
          user_id: id,
        })
        .then((res) => {
          this.courseList = this.courseList.filter((item, key) => item.user_id != id)
        })
    },
    bindLint(user_id) {
      this.$edu.route('/pageFound/user/index', {
        id: user_id,
      })
    },
  },
}
</script>

<style lang="scss">
page {
  background-color: white;
}
.course-scroll {
  height: calc(100vh - 44px);
}
.content {
  height: auto;
  width: 100%;
  z-index: 2;
}
.fans_item {
  height: 200rpx;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  .coverImg {
    margin-top: 40rpx;
    margin-left: 30rpx;
  }
  .fans_right {
    height: 200rpx;
    width: 72%;
    margin-left: 32rpx;
    display: flex;
    justify-content: space-between;
    .fans_l {
      height: 200rpx;
      width: 60%;
      overflow: hidden;
      .fans_name {
        height: 30rpx;
        line-height: 30rpx;
        color: #303133;
        font-size: 30rpx;
        margin-top: 59rpx;
      }
      .fans_intro {
        height: 26rpx;
        line-height: 26rpx;
        font-size: 26rpx;
        color: #606266;
        margin-top: 24rpx;
      }
    }
    .fans_r {
      height: 42rpx;
      // width: 110rpx;
      padding-left: 4rpx;
      padding-right: 10rpx;
      border-radius: 4rpx;
      border: 2rpx solid #b7bac1;
      color: #909399;
      margin-top: 76rpx;
      font-size: 22rpx;
      line-height: 42rpx;
    }
    .fans_re {
      height: 42rpx;
      // width: 110rpx;
      padding-left: 4rpx;
      padding-right: 10rpx;
      border-radius: 4rpx;
      border: 2rpx solid #b7bac1;
      color: #909399;
      margin-top: 76rpx;
      font-size: 22rpx;
      line-height: 42rpx;
    }
  }
}
</style>
